<template>
  <div
    class="common-title"
    :class="{
      'common-border': isBorder
    }"
  >
    <div class="w-[3px] h-[11px] rounded-[1.5px] bg-[#3a6ff8]"></div>
    <span class="ml-1 text-sm text-[#333333] font-semibold">
      {{ props.title }}
    </span>
    <span
      v-if="props.subTitle"
      class="text-xs h-5 text-[#333333] ml-2 align-baseline"
    >
      {{ subTitle }}
    </span>
  </div>
</template>
<script lang="ts" setup>
interface IProp {
  title: string
  subTitle?: string
  isBorder?: boolean
}
const props = withDefaults(defineProps<IProp>(), {
  title: '',
  subTitle: '',
  isBorder: true
})
</script>

<style lang="scss" scoped>
.common-title {
  @apply flex items-baseline;
}
.common-border {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(151, 151, 151, 0.21);
}
</style>
